<script setup>
import router from "../../../router/index.js";
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import {Back} from "@element-plus/icons-vue";
import {selectShovel} from "../../../http/rabbitmq/shovel.js";

const route = useRoute()

const shovelDetails = ref({})

function handleShovelSelect() {
  selectShovel(route.query.vhost, route.query.name).then(response => {
    shovelDetails.value = response
  })
}

const goBack = () => {
  router.push({path: '/shovel'})
}

onMounted(() => {
  handleShovelSelect()
})
</script>

<template>
  <el-page-header @back="goBack" style="height: 40px">
    <template #content>
      <span class="text-large font-600 mr-3"> {{ shovelDetails.name }} </span>
    </template>
  </el-page-header>
  <div style="width: 100%; height: calc(100% - 60px); overflow: auto">
    <el-descriptions column="1" border>
      <el-descriptions-item label="vhost">{{ shovelDetails.vhost }}</el-descriptions-item>
      <el-descriptions-item label="name">{{ shovelDetails.name }}</el-descriptions-item>
      <el-descriptions-item v-for="(value, key) in shovelDetails['value']" :label="key">
        {{ value }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<style scoped>

</style>